Introduction
Michel Damiens
mail : michel.damiens@gmail.com
site web : utl.manthano.fr
Ce site s’affiche en mode diapo : pour passer d’une page à la suivante ou à la précédente utiliser les touches « flèche droite » ou « flèche gauche » de votre clavier.
Pour le moment il est « en construction » avec de nombreux « bugs » : par exemple les menus risquent de ne pas fonctionner correctement.
Le contenu de cet atelier
Orienté vers la construction de sites internet et la programmation
- construction de pages d’un site en utilisant
- html, css et javascript à l’aide d’un éditeur de textes (vsCodium)
- un serveur http et le langage php
- un gestionnaire de bases de données (sqlite)
- html, css et javascript à l’aide d’un éditeur de textes (vsCodium)
- initiation aux outils informatiques au programme de l’éducation nationale :
- geogebra : logiciel de géométrie dynamique
- snap! (scratch) : initiation à l’algorithmique et à la programmation
- python : langage de programmation très puissant
- geogebra : logiciel de géométrie dynamique
Pré-requis
La participation aux activités de cet atelier suppose une maîtrise suffisante de l’outil informatique :
- être à l’aise avec le système de fichiers de votre ordinateur : sauvegarder et retrouver les documents que vous créez
- être capable de télécharger, d’installer et de mettre à jour des applications
- connaître l’utilisation des logiciels de base :
- messagerie électronique (vous aurez souvent à récupérer des documents que je vous enverrai par mail)
- navigateur web (Firefox conseillé)
- messagerie électronique (vous aurez souvent à récupérer des documents que je vous enverrai par mail)
Les outils nécessaires
Nous utiliserons essentiellement des logiciels libres disponibles à la fois pour les systèmes d’exploitation Linux, Windows et Mac
- un navigateur internet : Firefox
- un éditeur de textes : VsCodium
- gestionnaire de base de données : sqlite
Celles et ceux d’entre vous qui ont utilisé ces logiciels l’an dernier n’ont pas à les réinstaller ; ils peuvent par contre les mettre à jour si nécessaire.
Sqlite
Installation
Gestionnaire de bases de données Sqlite3
- pour Windows : créer un dossier (par exemple c:\sqlite) ; télécharger https://www.sqlite.org/2023/sqlite-tools-win32-x86-3430200.zip ; décompresser le fichier zip obtenu dans le dossier créé précédemment
- pour Linux
Interface graphique SqliteBrowser
- pour Windows : télécharger https://download.sqlitebrowser.org/DB.Browser.for.SQLite-3.12.2-win64.msi et l’installer
- pour Linux : taper dans un terminal
sudo add-apt-repository -y ppa:linuxgndu/sqlitebrowser
sudo apt-get update
sudo apt-get install sqlitebrowser - pour Mac : télécharger https://download.sqlitebrowser.org/DB.Browser.for.SQLite-3.12.2.dmg ou https://download.sqlitebrowser.org/DB.Browser.for.SQLite-arm64-3.12.2.dmg (selon votre système) et l’installer
Méthode de travail
dossier de travail
- Créer un dossier sur votre ordinateur qui contiendra tous les fichiers qui seront créés au cours des séances de l’atelier
- Vous assurer que vous savez y accéder à partir du navigateur web
documentation
Vous aurez très souvent besoin de consulter la documentation des logiciels. Je vous indiquerai les liens vers les sites les plus pertinents.
Sondage
(faire défiler avec la souris)
ou : https://framaforms.org/utl-atelier-informatique-module-6-1697709031
Développement web
Bases de données 20231117
Pré-requis : Installation de SQLiteStudio
Motivation
Exemple 1 : site web affichant vos photos ; l’affichage sur une page donnée pouvant être filtré selon certains critères : année, lieu (gps ?), circonstances, contenu, ...
Ces critères peuvent être asoociés à des « tags », ajoutés « à la main » pour chaque photo ou groupe de photos, ou récupérés à partir des métadonnées exif des photos si votre appareil est réglé pour les fournir.
Exemple 2 : site web permettant de gérér une bibliothèque avec un système de prêts aux usagers
Remarques :
- il est évident qu’il existe des utilitaires (applications ou sites) permettant de faire ça ; l’objectif dans cet atelier n’est pas de construire une nouvelle application qui rivalise avec ces utilitaires (encore qu’on puisse s’approcher de certaines fonctionnalités ou en imiter un sous-ensemble contenant celles qui nous sont utiles), mais de comprendre comment cela fonctionne.
- la difficulté va être d’interfacer les pages web du site avec la base de données : pour cela on aura besoin (en plus de ce qui a été fait l’an dernier) d’un serveur et du langage php
SERVEUR http -> PHP -> pages web
SERVEUR sqlite -> SQL -> données injectées dans les pages web
Petit historique
Les bases de données (database) et les systèmes de gestion de bases de données (SGBD) apparaissent dans les années 60 (Charles Bachman, prix Turing 1973) peu après l’invention des moyens de stockages efficaces et de grande capacité (1956 - disques durs).
On prend conscience de la nécessité de séparer les données de leur traitement.
En 1970 le modèle mathématique des bases de données relationnelles est mis au point (Edgar F. Codd, prix Turing 1981), ce qui fournit aussi les éléments nécessaires pour un langage d’interrogation (SQL) développé entre 1970 et 1980 par IBM et Oracle.
Actuellement, IBM DB2, Oracle Database, MySQL, PostgreSQL et Microsoft SQL Server sont les principaux systèmes de gestion de base de données sur le marché.
Les applications des bases de données sont innombrables et omniprésentes : gestion des informations médicales, billetteries, vente en ligne, bibliothèques, antivirus, comptabilité, moteurs de recherche, intelligence artificielle...
Le développement du Web à partir des années 80 va voir se répandre l’utilisation de bases de données à l’intérieur des pages html par l’intégration du SQL par des préprocesseurs comme PHP ou Python.
Exemple
Voyons sur un exemple ce qui différencie conceptuellement une base de données d’un classeur Calc (de LibreOffice) ou Excel (de Microsoft Office)
Considérons une bibiothèque qui possède :
- une liste de livres à prêter avec, pour chaque livre :
- titre
- auteur(s)
- année d’édition
- catégorie (roman, essai, ...)
- titre
- une liste d’usagers avec, pour chaque usager :
- nom
- prénom
- date de naissance
- adresse mail
- nom
et qui voudrait gêrer informatiquement les prêts (date d’emprunt, date de retour)
Solution « tableur »
gestion-bibliothèque-tableur
Un tableau, avec comme colonnes toutes les « rubriques » indiquées ci-dessus (titre du livre, auteur du livre, ..., nom usager, ... , une colonne indiquant la date du prêt, une pour la date de retour.
Inconvénient : il faut répéter les informations pour chaque livre prêté.
Problème : comment faire pour les emprunts multiples d’une même personne à une date donnée et pour les emprunts d’une même personne à plusieurs dates ?
Solution « base de données »
- une table avec les livres et un champ « identifiant » pour chaque livre
- une table avec les usagers et un champ « identifiant » pour chaque usager
- une « table des prêts », donc chaque enregistrement est un lien entre l’identifiant d’un usager et l’identifiant d’un livre avec en plus un champ pour la date d’emprunt et un pour la date de reto
Définitions
Une base de données est un ensemble de tables reliées par des colonnes (champs) communes.
Chaque table est un ensemble de lignes (enregistrements) et de colonnes (champs).
À l’intersection d’une ligne est d’une colonne se trouve la valeur de l’enregistrement pour le champ correspondant.
Un gestionnaire de bases de données (par exemple sqlite) est une applications qui permet de gérer la base de données, c’est à dire :
- créer, modifier, supprimer, sauvegarder des bases de données
- créer et supprimer des tables, modifier leur structure (liste et caractéristiques des champs)
- ajouter, modifier, supprimer des enregistrements dans une table
- interroger la base de données pour en extraire des informations
Toutes les actions du gestionnaire peuvent s’exécuter à l’aide de requêtes SQL.
Il existe aussi des interfaces graphiques : sqlitebrowser (/DB Browser for Sqlite), Base de LibreOffice, Access de Microsoft... pour effectuer ces actions.
On va utiliser sqlitebrowser
Syntaxe SQL
Documentation
Référence officielle sqlite (en anglais) : https://sqlite.org/lang.html
Tutoriel sqlite (en anglais) : https://www.sqlitetutorial.net/
Tutoriel SQL (en français) : https://sql.sh/ (utilise SQL plutôt que SQLite, mais pour ce qu’on va en faire cette année les différences sont minimes)
Création, suppression et modification de table
Création
CREATE TABLE nomTable (
nomCol1 type nonNul? autoIncrément?,
nomCol2 type nonNul? autoIncrément?,
...
PRIMARY_KEY (nomCol),
FOREIGN_KEY (nomCol) REFERENCES nomTable(nomCol)
) ;
Suppression
DROP TABLE nomTable1, nomTable2, ... ;
Modification
ALTER TABLE nomTable ADD nomCol AFTER nomCol1 ;
ALTER TABLE nomTable DROP nomCol ;
Création et modification d’enregistrement
INSERT INTO et DELETE FROM
-- EXEMPLES pour les commandes INSERT INTO (ajout d'entregistrements) et DELETE FROM (suppression d'enregistememt) -- Ajout d'un nouvel usager (certaines colonnes seulement) INSERT INTO usagers (nom, prénom) VALUES ("Damiens","Michel") ; -- il n'est pas nécessaire de mettre toutes les colonnes -- ni de les mettre dans l'ordre des colonnes de la base ; les colonnes non utilsées auront la valeur NULL SELECT * FROM usagers ORDER BY id DESC ; -- vérification ; on remarque que l'id est automatiquement complété -- Ajout de plusieurs usagers (certaines colonnes seulement) INSERT INTO usagers (id, nom, prénom) VALUES (501,"Dupuis", "Anne"), (502,"Durand", "Marie") ; -- Ajout de plusieurs usagers (toutes les colonnes) INSERT INTO usagers VALUES ("Dupuis", "Anne", "2000-12-12", "dupuis.anne@free.fr"), ("Durand", "Marie","1960-01-22", "durand.marie@gmail.com") ; DELETE FROM usagers WHERE id >= 501 ;
UPDATE
Sélection
Sur une seule table
-- afficher les noms de tous les livres SELECT titre FROM livres ; -- les résultats sont affichés dans l'ordre de la table -- afficher les auteurs et titres de tous les livres SELECT auteur, titre FROM livres ; -- les colonnes sont affichées dans l'ordre de la requête et non dans l'ordre de la table -- afficher toutes les colonnes pour tous les livres SELECT * FROM livres ; -- afficher toutes les colonnes pour les 3 premiers livres SELECT * FROM livres LIMIT 3 ; -- ajouter OFFSET 2 pour voir la différence -- afficher l'auteur et l'éditeur pour les livres dont le titre est Alice au pays des merveilles SELECT auteur, éditeur FROM livres WHERE titre = "Alice au pays des merveilles" ; -- écrire alice à la place d'Alice -- afficher l'auteur, le titre et l'éditeur pour les livres dont le titre se termine par eilles SELECT auteur, titre, éditeur FROM livres WHERE titre LIKE "%eilles" ; -- % remplace n'importe quelle suite de lettres -- afficher l'auteur, le titre et l'éditeur pour les livres dont le titre contient mer SELECT auteur, titre, éditeur FROM livres WHERE titre LIKE "%mer%" ; -- essayer avec "% mer %" -- afficher l'auteur, le titre et l'éditeur pour les livres dont l'éditeur est Flammarion, classés dans l'ordre des auteurs SELECT auteur, titre, éditeur FROM livres WHERE éditeur = "Flammarion" ORDER BY auteur ; -- ajouter DESC si on veut dans -- l'ordre décroissant -- même chose que ci-dessus, les 5 derniers seulement SELECT auteur, titre, éditeur FROM livres WHERE éditeur = "Flammarion" ORDER BY auteur DESC LIMIT 5 ; -- 2 conditions SELECT auteur, titre, éditeur FROM livres WHERE éditeur = "Flammarion" AND titre LIKE "%col%" ; --remplacer AND par OR
Sur plusieurs tables
SELECT livres.id, livres.auteur, usagers.nom FROM livres, usagers WHERE livres.id = usagers.id ; SELECT livres.id, livres.auteur, usagers.nom FROM livres JOIN usagers ON livres.id = usagers.id ; SELECT usagers.nom, usagers.prénom, prêts.dateEmprunt, prêts.dateRetour FROM usagers JOIN prêts ON usagers.id = prêts.id_usager ORDER BY usagers.nom ; SELECT usagers.nom, usagers.prénom, prêts.dateEmprunt, prêts.dateRetour FROM usagers JOIN prêts ON usagers.id = prêts.id_usager WHERE JulianDay(dateRetour) - JulianDay(dateEmprunt) > 30 ORDER BY usagers.nom ; SELECT usagers.nom, usagers.prénom, COUNT(*) FROM usagers JOIN prêts ON usagers.id = prêts.id_usager WHERE JulianDay(dateRetour) - JulianDay(dateEmprunt) > 30 GROUP BY usagers.nom -- HAVING COUNT(*) > 10 -- ORDER BY usagers.nom ORDER BY COUNT(*) DESC ;
L’éditeur vsCodium
L’éditeur vsCodium qui va nous permettre d’écrire les pages composant un site web ; il possède un système d’extensions permettant de l’adapter à nos besoins.
Remarque : dans vsCodium, la roue dentée en bas de la barre latérale gauche permet d’accéder aux fonctions Paramètres (Ctrl-,), Extensions (Ctrl-Maj-X), Palette de commandes (Ctrl-Maj-P)
Installation
- pour Windows, il faut le télécharger ici : https://github.com/VSCodium/vscodium/releases/download/1.83.1.23285/VSCodium-x64-1.83.1.23285.msi
- pour Linux (Ubuntu) : https://github.com/VSCodium/vscodium/releases/download/1.83.1.23285/codium_1.83.1.23285_amd64.deb
- pour Mac : https://github.com/VSCodium/vscodium/releases/download/1.83.1.23285/VSCodium.x64.1.83.1.23285.dmg
ou https://github.com/VSCodium/vscodium/releases/download/1.83.1.23285/VSCodium.arm64.1.83.1.23285.dmg selon votre processeur (x64 ou arm64)
L’installateur de votre système doit s’ouvrir automatiquement (sinon double-cliquer sur le fichier téléchargé).
Si l’installation ne fonctionne pas, d’autres méthodes sont expliquées ici : https://vscodium.com/#install
Paramétrages
Extensions à installer
• pour mettre l’interface en français :
– ouvrir le menu des extensions (combinaison de touches Ctrl-Maj-x ou bien clic sur l’icône à gauche de l’écran représentant 4 petits carrés, dont un détaché des autres)
– dans la boite de recherche en haut, taper french et choisissez French language pack
– dans la fenêtre de droite cliquer sur installer
- ensuite ouvrir l’outil Palette de commandes (Ctrl-Maj-P), choisir Configurer la langue d’affichage et choisir français
• de la même manière,
– en tapant html dans la boîte de recherche, installez l’extension HTML CSS Support (cette extension facilite l’écriture des pages web)
– en tapant browser dans la boîte de recherche, installez l’extension Open in browser (cette extension permet d’ouvrir les pages web créées à partir de vsCodium)
Nous installerons plus tard d’autres extensions, au fur et à mesure de nos besoins.
Paramètres
dans vsCodium utiliser Paramètres (Ctrl-,), taper word dans la fenêtre de saisie, puis mettre le paramètre word wrap à on
Utilisation
Créer un dossier dans lequel vous mettrez tous les documents que vous allez créer avec vsCodium (que ce soit des fichiers html, css, javascript, python, ...)
Quelques astuces
Si vous tapez lorem10 suivi de TAB ou ENTER un texte de 10 mots en « pseudo latin » s’affiche
Quelques ajustements concernant Windows ou Linux
- Dans Windows, par défaut, on ne voit pas les extensions des noms de fichiers dans l’explorateur ; pour l’édition de pages web il est préférable de voir ces extensions :
Panneau de configuration - Apparence et personnalisation - Afficher les fichiers et dossiers cachés - décocher la case Masquer les extensions des fichiers dont le type est connu
(voir : https://www.clubic.com/tutoriels/article-858733-1-comment-afficher-extension-fichiers-windows-10.html)
Pages web 20240112
Généralités
La documentation sur le site de mozilla/firefox : https://developer.mozilla.org/fr/ (menus « références » et « guide », items « html », « css », « javascript ») ; une icone en haut à droite de chaque page permet d’avoir la documentation en français.
Principe de base : séparation
- de la structure (html),
- de la présentation (css),
- de l’interactivité dynamique avec l’utilisateur (javascript)
Le code html
Le code html de la page a plusieurs fonctions
- il structure « logiquement » l’ensemble des informations à afficher en sections, paragraphes, tableaux, listes, ...
- il indique au navigateur certaines méta-informations nécessaires pour l’affichage (langue utilisée, liens vers les feuilles de style, liens vers les scripts, ...)
En particulier, il ne s’occupe pas directement de la présentation visuelle (couleurs, positionnement, ...) qu’il va déléguer aux feuilles de styles (css), ni de l’interaction avec l’utilisateur, qu’il va déléguer aux feuilles de scripts (javascript).
Le composant fondamental du langage html est l’élément html qui se présente (avec des variations) sous la forme : <balise attributs>contenu</balise>
Remarque : quand la page est affichée par le navigateur, seul le contenu est affiché.
Exemples
<h1>exemple de titre</h1>
élément indiquant un titre de niveau 1 (balise <h1>) ; le texte qui s’affiche comme titre sera exemple de titre ; </h1> est la balise de fermeture
<p> voici une première ligne, <br>et voici la ligne suivante </p>
<p> est une balise de paragraphe, fermée par </p>
<br> est une balise indiquant un saut de ligne (elle n’a pas de balise fermante)
Le texte entre <p> et </p> s’affichera sur deux lignes
<img src="mon image.jpg">
<img> est une balise d’image ; elle n’a pas de balise fermante ; elle a un attribut src dont la valeur est le nom du fichier image à afficher
Remarque : contrairement au principe qui préconise de distinguer la structure (html) et le style (css), il est possible (mais non recommandé) d’associer un attribut style aux balises
<p style="color:blue"> ... </p> Le texte du paragraphe (ici indiqué par ...) sera écrit en bleu. Nous verrons ensuite comme réaliser ceci à l'aide d'une feuille de style.
Complément : structure de la page et feuilles de style
Structure de base de la page
<!doctype html> <html lang="fr"> <head> <meta charset="utf-8"> <title>titre de la page</title> <link rel="stylesheet" href="site.css"> </head> <body> </body> </html>
Organisation du bloc <body>
L’organisation dans body : div, section, article, p
Feuille de style 20240126
Grammaire des feuilles de style et lien avec les éléments html : id et class
Exemple de style : les boites flexibles
Les conteneurs flexibles
Une boite devient un conteneur flexible s’il lui est associée la règle css
display: flex ;
Le modèle flexbox est un modèle d’affichage pour les éléments de type boîte.
C’est un modèle unidimensionnel : les éléments d’un conteneur flexible sont disposés sur un seul axe, (en ligne ou en colonne), cet axe pouvant ou non se « répandre » sur plusieurs lignes (ou colonnes).
Règles css applicables aux conteneurs flexibles
display: flex ; flex-direction: row ; /* direction et sens du flot (définit l'axe principal) : row, row-reverse, column, column-reverse : */ flex-wrap: wrap ; /* passage à la ligne : wrap, nowrap, wrap-reverse */ justify-content: flex-start ; /* répartition sur l'axe principal : flex-start, flex-end, center, space-between, space-around, space-evenly */ align-items: stretch ; /* alignement sur l'axe secondaire : flex-start, flex-end, center, stretch, baseline */ align-content: normal ; /* répartition sur l'axe secondaire : flex-start, flex-end, center, space-between, space-around, stretch, baseline, first-baseline, last-baseline */ row-gap : 10px ; /* distance entre les lignes */ column-gap: 20px ; /* distance entre les colonnes */ /* La propriété align-content n'est utile que si on est en mode wrap et qu'il y a plusieurs lignes. Pour les propriétés justify-content, align-items et align-content on peut ajouter une valeur : safe (ou nosafe) qui empêche (ou permet) les débordements. */
Les éléments flexibles
Les éléments contenus dans un conteneur flexible sont appelés éléments flexibles
Les règles css applicables à un élément flexible sont :
order: 1 ; /* modifie la position de l'élément */ flex-grow: 1 ; /* facteur pour la capacité de l'élément à augmenter */ flex-shrink : 1 ; /* facteur pour la capacité de l'élément à diminuer */ flex-basis: 20% ; /* taille par défaut : longueur ou mot-clé (auto, content, max-content, min-content, fit-content) */ align-self: flex-end ; /* modifie l'alignement sur l'axe secondaire défini par align-items : flex-start, flex-end, center, stretch, baseline */
Pour flex-grow, flex-shrink et flex-basis, on utilisera plutôt le raccourci :
flex: 2 1 auto ; /* grow shrink basis ; si on ne met que le premier ou les deux premiers , les autres sont choisies "intelligemment" */
Résumé
Structure d’une page
Dans la page index.html qui présente un site de bibliothèque on a choisi une organisation du type décrit ci-dessous.
Chaque article va contenir :
- le titre d’un livre
- une image de ce livre
- un ou plusieurs paragraphes qui résument ce livre
En outre la page est divisée en deux sections :
- la première section présente les nouveautés
- la deuxième section contient tous les livres
En réalité, tous les livres vont être contenus dans une base de données et le serveur va construire la page dynamiquement en allant chercher les informations dans la base.
Les blocs de structure (exemple)
body header section article article ... article section article ... article
C’est sur ces blocs que va agir la feuille de style pour les positionner dans la page, par exemple en mode flexible (flex)
On distingue les blocs conteneurs (par exemple section) et les blocs éléments de ces blocs contenus (article).
header et chacune des sections sont des blocs éléments du conteneur body
Les éléments (blocs de contenu)
Par exemple, on peut avoir pour chaque article une organisation du type
article h1 img p p
Installation d’un serveur 20240209
Qu’est-ce qu’un serveur ?
On se représente souvent un serveur comme un ordinateur distant qui envoie des informations. On confond ainsi la logiciel serveur et le poste qui l’exécute.
Un serveur est en fait une application (un programme) qui exécute (en général sans interruption) un service permettant d’échanger des informations entre lui et un client. A chaque application serveur sur un ordinateur distant correspond donc une application client sur les postes locaux.
Il y a différents types de services, proposés par des serveurs spécialisés : mail, envoi et partage de fichiers ou partage de périphériques, distribution des adresses dans un réseau, bases de données, pages web ; chacun correspond en général à un ou plusieurs protocoles de communication particuliers :
- pop, imap et sftp pour les mails,
- ftp, ssh, nfs pour les fichiers,
- dhcp pour les adresses dans un réseau,
- http pour les pages web,
...
Serveur web (http)
Celui qui nous intéresse dans le cadre de la création de sites est le serveur http qui envoie des pages web.
Différents applications proposent des serveurs http : Microsoft Web Server (IIS), Google Web Server, Lighthttpd, Nginx, ...
Les logiciels clients http les plus courants sont les navigateurs internet (Firefox, Internet Explorer, Edge, Chrome, ...)
Nous utiliserons le logicel serveur http Apache qui est libre, gratuit, multi-plateforme.
Pourquoi un serveur ?
Quelle différence entre créer une page web (localement, ou à distance sur un serveur) et utiliser un serveur pour générer une page web ?
Localement (sur le poste client), pour des raisons de sécurité, la page web n’a pas le droit d’accéder directement aux fichiers de l’ordinateur local. Elle ne peut pas, par exemple, lire le contenu des dossiers.
Par contre, sur le poste distant, le serveur a accès (à travers un langage comme php par exemple) à toutes les ressources du système dans un environnement contrôlé par le serveur (et paramétré par l’administrateur du serveur). En particulier, un dossier du poste (document_root) contenant les pages du site sera géré par le serveur.
Le langage php, sur le serveur, va permettre de traiter la requête du client et d’y répondre en générant dynamiquement une page html en fonction des informations envoyés par le client et des données stockées sur le serveur.
Remarquons que, pour les tests par exemple, on peut installer un logiciel serveur et un logiciel client sur le même poste local.
Installation locale du serveur Apache
On va installer xampp qui contient Apache (serveur web), MariaDB (base de données), Php (langage de programmation) et d’autres applications.
Pour Windows
- télécharger le fichier d’installation ici : https://sourceforge.net/projects/xampp/files/XAMPP%20Windows/8.2.12/xampp-windows-x64-8.2.12-0-VS16-installer.exe
(il faut attendre quelques secondes que la fenêtre d’installation s’ouvre) - double-cliquer sur le fichier téléchargé pour l’installer
suivre les étapes 6 à 10 de https://www.ionos.fr/digitalguide/serveur/outils/tutoriel-xampp-creer-un-serveur-de-test-local/ avec les variantes suivantes :
- dans l’étape 6, décocher Mercury Mail Server, Tomcat, Webalizer
- dans l’étape 7, choisissez bien c:\xampp comme dossier d’installation
- dans l’étape 9, si apparaît le message concernant le pare-feu, cocher les cases pour autoriser la désactivation des protections locales
- dans l’étape 10, cocher la case pour lancer le panneau de contrôle du serveur
- dans l’étape 6, décocher Mercury Mail Server, Tomcat, Webalizer
Pour Ubuntu
- télécharger le fichier d’installation ici : https://sourceforge.net/projects/xampp/files/XAMPP%20Linux/8.2.12/xampp-linux-x64-8.2.12-0-installer.run
- dans un terminal taper :
sudo nautilus
- dans le gestionnaire de fichiers qui apparaît chercher le fichier que vous venez de télécharger
- vérifier qu’il est exécutable : clic droit sur le fichier, propriétés, onglet permissions, cocher la case Exécution Autoriser l’exécution du fichier comme un programme
- double-cliquer sur ce fichier ; le serveur va être installé dans le dossier /opt/lampp/
- dans un terminal taper les lignes suivantes afin que le serveur démarre automatiquement lorsque vous utilisez ubuntu :
sudo ln -s /opt/lampp/lampp /etc/init.d/lampp sudo update-rc.d lampp defaults
Lancement et paramétrage du serveur
Quand l’installation est terminée, il reste à lancer le serveur et à le paramétrer ; tout ceci se fait à l’aide d’un panneau de contrôle.
Lancer le serveur
Pour Windows
Pour ouvrir la panneau de contrôle, cliquer sur xampp-control dans le menu des applications installées
Dans la ligne Apache, cliquez sur le bouton Start dans la colonne Actions
Pour Ubuntu
Pour ouvrir le panneau de contrôle, taper dans un terminal : *sudo /opt/lampp/manager-linux-x64.run
- cliquez sur l’onglet Manage Servers (gérer les serveurs)
- si la ligne Apache Web Server indique Running, tout va bien, le serveur fonctionne ; sinon, sélectionnez cette ligne et cliquez sur le bouton Start ; après quelques instants le statut doit passer à Running
Paramétrer le serveur
Pour Windows
Le serveur qu’on vient d’installer est configuré par défaut pour servir les pages web qui se trouvent dans le dossier c:\xampp\htdocs
Pour voir la page d’accueil (qui s’appelle index.php) il faut :
- ouvrir votre navigateur (Firefox par exemple)
- taper localhost dans la barre d’adresse
Vous devez alors voir la page d’accueil de xampp.
Ce que nous voulons en fait, c’est afficher une page d’accueil pour notre site. Pour cela il faut paramétrer le serveur.
Dans la panneau de contrôle :
- cliquer sur le bouton Config en haut à droite et cochez Apache dans la fenêtre Autostart of modules (si vous avez un message d’erreur, allez dans votre explorateur de fichier puis : clic droit sur le fichier d’application xampp-control, Exécuter en tant qu’administrateur)
- cliquez sur le bouton Config dans la ligne d’Apache et ouvrez le fichier httpd.conf
Attention : ce fichier texte contient l’ensemble des paramètres qui permettent au serveur de fonctionner correctement ; il est donc nécessaire de réaliser les modifications avec soin.
On va indiquer où se trouvent les fichiers du site que nous voulons afficher.
Pour trouver le dossier contenant vos fichiers sur votre ordinateur, ouvrez le gestionnaire de fichier, sélectionnez ce dossier, clic droit, propriétés, emplacement
Si par exemple votre dossier se nomme monSiteWeb et que l’emplacement indique C:\Users\Pc\Documents\Utl, il faut modifier deux lignes dans le fichier httpd.conf
Il faut modifier 2 lignes :
- chercher la ligne (normalement vers le ligne 250) contenant DocumentRoot « C:\xampp\htdocs » et remplacer cette ligne par DocumentRoot *« C:\Users\Pc\Documents\Utl\monSiteWeb »
- remplacer la ligne suivante qui contient <Directory « C:\xampp\htdocs »> par <Directory « C:\Users\Pc\Documents\Utl\monSiteWeb »>
Sauvegarder le fichier de configuration (avec la combinaison de touches Ctrl-s par exemple). Vous pouvez maintenant fermer l’éditeur.
Revenir au panneau de contrôle du serveur, sélectionnez la ligne Apache Web Server et cliquer sur le bouton Restart (ou bien Stop puis Start)
Il faut maintenant que le dossier que vous avez indiqué pour héberger votre site (par exemple « C:\Users\Pc\Documents\Utl\monSiteWeb ») contienne un fichier nommé index.php
Pour cela :
- si vous avez déjà dans ce dossier un fichier qui s’appelle index.html, renommez-le en index.php
- sinon, créez dans ce dossier un fichier texte contenant simplement un mot comme « Bonjour » (ou un texte court) et sauvegardez-le sous le nom index.php
Il vous reste à ouvrir votre navigateur internet, mettre localhost dans la barre d’adresse pour afficher cette page d’accueil de votre site.
Si cela fonctionne, vous n’aurez plus à vous occuper du serveur (sinon pour la lancer au démarrage).
La suite va consister à créer les fichiers (html, css, php, ...) qui vont constituer votre site.
Pour Ubuntu
Le serveur qu’on vient d’installer est configurer par défaut pour servir les pages web qui se trouvent dans le dossier /opt/lampp/htdocs
Pour voir la page d’accueil (qui s’appelle index.php) il faut :
- ouvrir votre navigateur (Firefox par exemple)
- taper localhost dans la barre d’adresse
Vous devez alors voir la page d’accueil de xampp.
Ce que nous voulons en fait, c’est afficher une page d’accueil pour notre site. Pour cela il faut paramétrer le serveur.
Dans la panneau de contrôle :
- sélectionnez la ligne Apache Web Server et cliquez sur le bouton Configure
- dans la fenêtre qui apparaît, cliquez sur le bouton Open Conf File
- dans la fenêtre Question, choisir OUI
S’ouvre alors l’éditeur de texte de votre système (gedit sous ubuntu) qui va vous permettre de modifier le fichier de configuration.
Attention : ce fichier texte contient l’ensemble des paramètres qui permettent au serveur de fonctionner correctement ; il est donc nécessaire de réaliser les modifications avec soin.
On va indiquer où se trouvent les fichiers du site que nous voulons affichere.
On va supposer que votre nom d’utilisateur sous Ubuntu est michel et que vous voulez placer les fichiers de votre site dans votre dossier personnel dans un sous-dossier nommé utl d’un dossier nommé monSiteWeb
Il faut modifier 4 lignes :
- chercher la ligne (normalement vers le ligne 230) contenant DocumentRoot « /opt/lampp/htdocs » et remplacer cette ligne par DocumentRoot *« /home/michel/monSiteWeb/utl »
- remplacer la ligne suivante qui contient <Directory « /opt/lampp/htdocs »> par <Directory « /home/michel/monSiteWeb/utl »>
- chercher la ligne (normalement vers le ligne 170) qui contient User daemon et remplacer cette ligne par User michel
- remplacer la ligne suivante qui contient Group daemon par Group michel
Sauvegarder le fichier de configuration (avec la combinaison de touches Ctrl-s par exemple). Vous pouvez maintenant fermer l’éditeur.
Revenir au panneau de contrôle du serveur, sélectionnez la ligne Apache Web Server et cliquer sur le bouton Restart (ou bien Stop puis Start)
Il faut maintenant que le dossier que vous avez indiqué pour héberger votre site (par exemple /home/michel/monSiteWeb/utl) contienne un fichier nommé index.php
Pour cela :
- si vous avez déjà dans ce dossier un fichier qui s’appelle index.html, renommez-le en index.php
- sinon, créez dans ce dossier un fichier texte contenant simplement un mot comme « Bonjour » (ou un texte court) et sauvegardez-le sous le nom index.php
Il vous reste à ouvrir votre navigateur internet, mettre localhost dans la barre d’adresse pour afficher cette page d’accueil de votre site.
Si cela fonctionne, vous n’aurez plus à vous occuper du serveur (sinon pour la lancer au démarrage).
La suite va consister à créer les fichiers (html, css, php, ...) qui vont constituer votre site.
Affichage de la page d’accueil par défaut
dans un navigateur : http://localhost ou bien simplement localhost ou bien http://127.0.0.1
Paramétrage du serveur
Principes
Le serveur Apache va chercher les pages du site dans un dossier appelé document_root ; il n’a accès à aucun autre dossier. Par défaut, sous Windows, ce dossier est le dossier htdocs contenu dans le dossier d’installation de xampp (par exemple : c:\xampp\htdocs). De même, sous Ubuntu, c’est /opt/lampp/htdocs/.
En général on va modifier ce choix pour lui faire correspondre le dossier dans lequel on mettre nos pages web.
Modification de DocumentRoot
Cela se fait avec le panneau de contrôle.
Sous Windows
Il va falloir indiquer au serveur le dossier où il doit chercher les pages web que vous souhaitez utiliser (de dossier est appelé DocumentRoot).
Par défaut ce dossier est : c:\xampp\htdocs. Ce qui est mis dans ce dossier sera servi à l’adresse http://localhost
Procédure pour modifier DocumentRoot
Il faut d’abord que vous identifiez clairement le chemin du dossier dans lequel vous avez mis jusqu’ici les fichiers (html, css, images) utilisées dans vsCodium
Par exemple :
c:\
Sous Ubuntu
L’application est installée dans :
/opt/lampp
qui n’est pas accessible à l’utilisateur courant
Par défaut, le dossier DocumentRoot est
/opt/lampp/htdocs
Pour modifier cela, dans le panneau de contrôle : Manage Servers - Apache Web Server - Configure - Open Conf file
Ceci ouvre httpd.conf qu’il faut modifier en deux endroits : (vers la ligne 230 ?)
- remplacer dans la ligne commençant par DocumentRoot le chemin indiqué entre guillements par le chemin du dossier dans lequel vous allez mettre votre site : par exemple pour moi « /media/DATA/MesDocs/Devel/projets/utl/atelier informatique »
- idem dans la ligne (suivante ?) commençant par <Directory
Exemple : en ce qui me concerne cela va donner :
DocumentRoot « /media/DATA/MesDocs/Devel/projets/utl/atelier informatique/02-construction sites web/serveur »
<Directory « /media/DATA/MesDocs/Devel/projets/utl/atelier informatique/02-construction sites web/serveur »>
Pour Ubuntu : il faut modifier en plus les deux lignes (175 et 176 ?) contenant User daemon et Group daemon en remplaçant daemon par votre nom d’utilisateur ubuntu ; en ce qui me concerne cela donne User michel et Group michel
Pour terminer, ouvrez le panneau de contrôle de xampp, arrêtez le serveur et relancez-le
Éléments de base du PHP 20240503
Principes de base
Le dossier (et ses sous-dossiers) que vous avez désigné comme étant DocumentRoot va contenir les pages de votre site web.
En local, en ouvrant votre navigateur sur l’adresse localhost le serveur va chercher un fichier index.php (ou index.html) et va l’afficher.
Vous pouvez aussi afficher un fichier html ou php qui s’appelle par exemple ex.php en utilisant localhost/ex.php ou le chemin de ce fichier (après localhost) s’il est dans un sous-dossier.
Les fichiers php peuvent contenir du html mais, la plupart du temps ce html est mêlé à des bloc écrits en langage javascript.
Le code php permet, entre autres,
- d’écrire « dynamiquement » du texte ou du html
- d’accéder aux ressources du serveur : en général aux dossiers de DocumentRoot
- d’accéder à des bases de données
- ...
Premier exemple
Un bloc php est contenu entre les balises <?php et *?>
Si vous insérez dans une page vide ou dans une page exemple.hml qui contient déjà du code html (que vous avez renommée exemple.php) le bloc suivant, le serveur va traduire tout ça en html et servir la page ainsi obtenue.
<?php echo "bonjour" ; echo "<br>" ; echo date("m.d.Y") ; echo "<br>" ; /* on affiche tous les fichiers du dossier courant $fichiers = scandir(".") ; print_r($fichiers) ; echo "<br>" ; */ /* on affiche tous les noms des fichiers du dossier courant */ $fichiers = glob("*.*") ; foreach ($fichiers as $f) { echo $f . "<br>" ; } /* on a affiche toutes les images du dossier courant */ $images = glob("*.jpg") ; foreach ($images as $f) { echo "<img src=" . "'" . $f . "'" . ">" ; } ?>
Programmation Python
Introduction
Qu’est-ce que programmer ?
Programmer c’est créer un algorithme et le traduire en un programme écrit dans un langage de programmation, par exemple python (mais aussi : C, lisp, fortran, pascal, java, ...
Algorithme
Un algorithme est la description structurée, en « pseudo-langage » humain, d’une suite d’actions que l’on veut faire exécuter à un ordinateur. Ces actions portent sur des données et produisent des données.
Cela présuppose que l’on sait à priori ce que l’ordinateur est capable de faire.
Dans un premier temps on va supposer qu’il est capable :
● d’utiliser des nombres, des chaines de caractères (phrases) et des listes (de nombres, de chaines et de listes)
● d’affecter un nom (variable) aux données qu’il manipule
● de demander à l’utilisateur de lui fournir des données
● d’afficher une donnée
● de transformer des données par certaines fonctions (commandes ou opérations)
● de répéter une opération
● d’exécuter une opération seulement quand une condition est vérifiée (ce qui nécessite un type de données particulier : les booléens)
Programme
Un programme utilise uniquement les mots et la grammaire du langage (formel) de programmation dans lequel il est écrit.
Les mots et la grammaire du langage de programmation, strictement définis, reflètent les actions que l’ordinateur est capable de réaliser.
Remarquons cependant que l’ordinateur a besoin que le programme soit traduit en langage binaire ; cela se fait de deux manières différentes :
● par compilation (pour les langages comme l’assembleur ou le C) : le compilateur transforme l’ensemble du programme en binaire puis le processeur exécute le code obtenu
● par interprétation (pour les langages comme python) : l’interpréteur exécute le programme en le transformant au fur et à mesure en binaire.
Installation du langage
Linux (Ubuntu)
- python3 est pré-installé
- taper dans un terminal :
sudo apt install python-is-python3
Windows
télécharger : https://www.python.org/downloads/release/python-3121/
puis installer le fichier téléchargé (soit en choisissant cette option à la fin du téléchargement, soit en double-cliquant sur le fichier téléchargé)
attention : au moment de l’installation cocher les 2 cases en bas de la fenêtre, en particulier la case : ajouter python au chemin (add python to path)
Installation d’un éditeur de textes
Pour écrire et exécuter les programmes on va au début utiliser l’éditeur IDLE, intégré au langage.
Si vous utilisez déjà un autre éditeur (Edupython, online-python, ...), vous pouvez continuer à l’utiliser. Le langage sera le même ; il faudra simplement adapter les explications à l’interface. N’hésitez pas à me contacter en cas de difficulté.
documentation : https://docs.python.org/fr/3/library/idle.html
Installation pour Linux (Ubuntu)
dans un terminal : sudo apt install idle
une icone est créée dans la liste de vos applications (icone 9 point en bas du dock à gauche)
Installation pour Windows
installé en même temps que Python ; un dossier est créé dans la liste des applications : ce dossier contient à la fois l’éditeur et le langage
Paramétrage
Idle est composé de (au moins) deux fenêtres : l’une pour l’écriture des programmes (edit), l’autre pour l’exécution (shell ou console).
Options - configure IDLE :
Fonts : en bas de la fenêtre on peut modifier la taille des caractères
Windows : cocher At Startup open edit window
Shell/Ed : cocher *At start of run (F5) No Prompt
Fonctionnement de l’environnement python
Python en ligne de commande
(On n’utilisera pas cette méthode, très vite trop restrictive)
Sous Windows, on peut ouvrir une console python en tapant py dans la ligne de commande :
clic droit sur l’icone Windows, Exécuter, taper cmd et valider, puis taper py ;
pour sortir de la console python, taper exit(),
puis taper exit pour sortir de la ligne de commande.
Sous Linux, taper python ou python3 dans un terminal (qu’on ouvre avec Ctrl-Alt-t)
Utilisation de Idle
Si vous avez paramétré Idle comme indiqué ci-dessus, quand vous cliquez sur l’icône de lancement de Idle vous ouvrez une page (la page d’édition) dans laquelle vous allez pouvoir taper les programmes.
Quand vous aurez écrit un programme, taper sur la touche F5 pour l’exécuter : cela va ouvrir une deuxième fenêtre (le shell, ou console, ou fenêtre d’exécution) dans laquelle le programme s’exécute.
Le langage Python
La documentation de Python en français se trouve ici : https://docs.python.org/fr/3/ (en particulier au départ les parties « tutoriel » et « référence du langage »)
Ce site : https://python.sdv.univ-paris-diderot.fr/01_introduction/ contient (à mon avis) une très bonne introduction à Python
Premiers exemples en python
Exemple 1
si vous tapez dans l’éditeur idle
print("bonjour")
et que vous valider (c’est à dire appuyez sur ENTRÉE)
le texte bonjour (sans les guillemets) s’affiche dans la fenêtre d’exécution, puis passe à la ligne ; l’indicateur >>> apparaît dans la marge, signifiant que l’exécution s’est terminée et que l’interpréteur python attend la prochaine instruction.
Il faut alors retourner dans le fenêtre d’édition pour écrire d’autres instructions.
print est une instruction d’affichage ; « bonjour » est une donnée de type chaîne de caractères
Exemple 2
x = 10 print(x)
définit une variable x et lui affecte la valeur 10
print(x) va afficher 10 dans la fenêtre d’exécution
remarque : vous allez aussi avoir le résultat de l’instruction précédente (bonjour) ; en effet, en appuyant sur F5 on exécute tout le contenu de l’éditeur.
pour éviter ceci il faut mettre un # au début de la ligne print(« bonjour ») pour indiquer que vous ne voulez pas qu’elle soit exécutée ; on dit que la ligne est commentée :
# x = 10
= est une instruction d’affectation, 10 est une donnée de type nombre entier (on peut utiliser aussi des nombres réels comme 3.14, appelé donnée de type flottant en python)
exercices :
remplacez x par x + 13 dans la ligne print(x) et ré-exécutez ; examinez ce qui se passe
recommencez en remplaçant
x par 2 * x + 5
x par x // 6
x par x % 6
x par x * 2
Exemple 3
remarque : si vous voulez empêcher dans la suite d’exécuter ce qui précède, vous pouvez mettre # devant chaque ligne ; autre manière (commentaire multi-lignes) consiste à mettre 3 guillemets avant et 3 guillemets après chaque ensemble de lignes qu’on veut invalider.
exemple :
""" print("bonjour") x = 10 print(x) """
Instruction de saisie
rep = input("comment vous appelez-vous ? ") print(rep)
Ceci ouvre une ligne de saisie commençant par comment vous appelez-vous ? et attend que vous tapiez quelque chose - dans la fenêtre d’exécution (et que vous validiez)
Ce que vous avez tapé est affecté à la variable rep puis affiché.
Pour quelque chose d’un peu plus sophistiqué :
rep = input("comment vous appelez-vous ? ") print("vous vous appelez " + rep)
va concaténer la chaîne « vous vous appelez » avec votre réponse.
input est une instruction de saisie
On remarque que + est è la fois un opérateur d’addition (pour les nombres) et un opérateur de concaténation (pour les chaînes de caractères)
Exercice : écrire un programme python qui demande votre prénom, puis (séparément) votre nom et affiche les deux séparés par un espace
Exemple 4 : introduction aux boucles et aux conditions
Boucle for
for i in range(1, 10): print(i)
va afficher les uns en dessous des autres les nombres 1, 2, 3, 4, 5, 6, 7, 8, 9 ; en effet :
range(1, 10) désigne l’intervalle des nombres entiers de 1 inclus à 5 exclu
for i in range(1, 5): (signe deux-points obligatoire à la fin ce cette ligne) signifie que la variable i (qu’on appelle un compteur) va prendre successivement toutes ces valeurs et que pour chacune de ces valeurs i, l’instruction qui suit (print i) va être exécutée.
On remarque que, quand on tape ENTREE après for in in range(1, 10) l’éditeur passe à la ligne et indente la ligne suivante : ceci est très important car structure la boucle : tout ce qui sera indenté en-dessous de la ligne for sera exécuté par la boucle for
Essayez :
for i in range(1, 10): print(i) print(i + 5) print("terminé")
puis :
for i in range(1, 10): print(i) print(i + 5) print("terminé")
pour comprendre le rôle et l’importance de l’indentation
Boucle for avec une condition
préalable : l’opérateur % désigne le reste de la division (par exemple 7 % 3 donne 1 car lorsqu’on effectue le division entière de 7 par 3 on a un reste égal à 1) ; en particuler on peut tester si en entier x est par en calculant x % 2 : si le résultat est 0 c’est que x est pair, si le résultat est 1 c’est que x est impair
for i in range(1, 10): if x % 2 == 0: print(x)
ne va afficher que les nombres pairs.
Il est important de constater :
- que la boucle for porte maintenant sur les 2 lignes qui suivent
- que la condition if porte sur la ligne print(x) qui est donc indentée par rapport à if et donc doublement indentée par rapport à for
- que la ligne de la condition if se termine par deux-points comme pour for
- que la condition « le reste de la division de x par 2 est égal à 0 » s’écrit x % 2 == 0 et non x % 2 = 0 (observez le double signe =) : en effet par exemple a = 0 signifie qu’on affecte à la variable a la valeur 0, tandis que a==2 signifie qu’on compare a avec 2
Projet 1 20240112
Deviner un nombre choisi par l’ordinateur
Le programme choisit au hasard un nombre entre 1 et 100 ; vous devez deviner ce nombre en proposant une réponse.
Le programme vous indique si votre réponse est correcte, trop grande ou trop petite.
Il compte le nombre de coups joués et, lorsque vous avez trouvé, affiche ce nombre de coups.
Version 1
# le langage python de base ne contient pas de fonctions permettant de choisir des nombres au hasard # il est nécessaire d'utiliser un module nommé random # depuis ce module on va importer une fonction nommée randint : randint(a,b) renvoie un nombre entier n au hasard avec a ≤ b ≤ b from random import randint nombre = randint(1, 100) réponse = int(input("que choisissez-vous ? ")) # input renvoie la réponse de l'utilisateur sous la forme d'une chaîne de caractères # il faut donc la convertir en nombre entier avec int pour pouvoir ensuite la comparer avec nombre if réponse == nombre: print("gagné") else: print("perdu, javais choisi " + str(nombre)) # str permet de convertir un nombre en chaîne de caractères (str(11) donne "11")
Version 2
from random import randint nombre = randint(1, 100) réponse = int(input("que choisissez-vous ? ")) if réponse == nombre: print("gagné") else: if réponse > nombre: print("perdu, trop grand, javais choisi " + str(nombre)) else: print("perdu, trop petit, javais choisi " + str(nombre))
Version 3
from random import randint nombre = randint(1, 100) réponse = int(input("que choisissez-vous ? ")) nbCoups = 1 while réponse != nombre: nbCoups = nbCoups + 1 if réponse > nombre: print("trop grand, recommencez !") else: print("trop petit, recommencez !") réponse = int(input("que choisissez-vous ? ")) print("gagné en " + str(nbCoups) + " coups")
Version 4
from random import randint def Jeu(): nombre = randint(1, 100) réponse = int(input("que choisissez-vous ? ")) nbCoups = 1 while réponse != nombre: nbCoups = nbCoups + 1 if réponse > nombre: print("trop grand, recommencez !") else: print("trop petit, recommencez !") réponse = int(input("que choisissez-vous ? ")) print("gagné en " + str(nbCoups) + " coups") Jeu()
Exercices
Exercice 1
Introduire un paramètre pour la fonction jeu permettant de choisir le maximum pour le nombre choisi par le programme.
Exercice 2
Écrire un programme proposant de jouer plusieurs fois pour améliorer son score
Correction des exercices 20240126
def AfficheDiviseurs(n): for d in range(1, n + 1): if n % d == 0: print(d) def AfficheSiPremier(n): compteurDiviseurs = 0 for d in range(1, n + 1): if n % d == 0: compteurDiviseurs = compteurDiviseurs + 1 if compteurDiviseurs == 2: print(str(n) + " est premier") else: print(str(n) + " n'est pas premier") # autre solution def AfficheSiPremier1(n): if n == 1: print(str(n) + " n'est pas premier") else: ok = True for d in range(1, n): if n % d == 0: ok = False if ok: print(str(n) + " est premier") else: print(str(n) + " n'est pas premier")
Remarques : amélioration des programmes
Dans AfficheSiPremier1, la boucle continue à s’effectuer après la rencontre d’un diviseur, ce qui est inutile ; on peut mettre une instruction break juste après ok = False qui aura pour effet de sortir immédiatement de la boucle. Tester AfficheSiPremier1(100000000) avec break et sans break
De même dans AfficheSiPremier, il peut être utile de mettre une instruction
if nombreDiviseurs == 3: break
après nombreDiviseurs = nombreDiviseurs + 1
Les listes
Introduction
Les données utilisées jusqu’ici sont de type « numérique » (int ou float), « chaîne de caractères » (str) et booléen (True, False). Ce sont des types simples.
La liste est un type de données composées : elle peut (récursivement) contenir des objets de tous types.
(Nous verrons plus tard qu’il existe d’autres types de données composées : tuples, dictionnaires, ensembles, classes).
Exemples de listes
Une liste s’écrit ente [ et ], ses éléments étant séparés par une virgule. L’ordre des éléments est significatif et il peut y avoir des éléments identiques (ce qui distingue une suite d’un ensemble au sens mathématique).
Par analogie avec les mathématiques, on verra qu’on peut définir une liste de deux manières différentes :
- en extension : en énumérant ses éléments
- en compréhension : en la définissant par des propriétés vérifiées par ses éléments.
# création de listes "en extension" liste1 = [1, 2.1, 3 / 5, 7 - 2] liste2 = ["maison", "poisson", "c'est une phrase"] liste3 = [1, "cheval"] liste4 = ["a", 11, [1, ["x", "y"]], liste2] # création de liste "en compréhension" liste5 = [x for x in range(1, 10) if x % 2 == 1] # liste des nombres impairs entre 1 et 9 liste6 = [d for d in range(1, 100) if 100 % d == 0] # liste des diviseurs de 100 # remarque : on peut ré-écrire la procédure AfficheDiviseurs sous la forme def AfficheListeDiviseurs(n): print([d for d in range(1, n) if n % d == 0]) liste7 = [d for d in liste6 if d % 2 == 1] # liste des diviseurs impairs de 100 liste8 = [n * 10 for n in liste7] # on multiplie chaque élément de liste7 par 10 liste9 = [(a, b) for a in range(0, 20) for b in range(0, 1)] liste10 = [s for s in ["asfdrt", "dfts", "dfgrt", "er", "hjyfd"] if len(s) <= 4] # len donne la longueur (nombre de caractères) d'une chaîne de caractères voyelles = ["a", "e", "i", "o", "u", "y"] doublesVoyelles = [u + v for u in voyelles for v in voyelles] listeDeuxVoyelles = [[u, v] for u in voyelles for v in voyelles if u < v]
Actions, opérations et fonctions sur les listes
# affichage de listes print(liste1) # les opérations à l'intérieur de la liste sont effectuées print(liste4) # opérations sur les listes print(liste1 + liste2) print(liste2 + ["chien"]) # équivaut à liste2.append("chien") print(liste3 * 2) # indices voyelles = ["a", "e", "i", "o", "u"] print(voyelles[0]) # premier élément de la liste (indice 0) print(voyelles[2]) # troisième élément de la liste (indice 2) print(voyelles[1:4]) # de l'élément d'indice 1 inclus à l'élément d'indice 4 exclu ; remplacer [1:4] par [1:] puis par [2:-1] puis par [2:0] # quelques fonctions print(len(voyelles)) # longueur de la liste print(sum([1, 2, 3, 4])) # somme des éléments print(max([3, 1, 4, 2])) # maximum ; de même pour min print("la somme des éléments de la liste [1, 2, 3] est égale à " + str(sum([1, 2, 3]))) # remarque : la fonction range ne donne pas une liste, mais on peut transformer le résultat en liste : print(range(0, 10)) print(list(range(0, 10)))
Exercices
- liste des 10 premiers multiples de 12
- écrire un programme qui demande deux nombres entiers n et k et affiche la liste des k premiers multiples de n
- écrire un programme qui construit une liste de 10 nombres entiers choisis au hasard entre 1 et 100, affiche cette liste et le plus grand élément de la liste
- écrire un programme qui, étant donnée une liste, affiche cette liste écrite en ordre inverse (par exemple affiche [« a », « r », « e »] si on lui a donné [« e », « r », « a »]
- écrire un programme qui, étant donnée une liste de nombres entiers, affiche la liste de ces nombres classés dans l’ordre croissant
Attention : dans les programmes 4 et 5, si on demande la liste à l’utilisateur en utilisant input, on se heurte à une difficulté : input renvoie une chaîne de caractères. Et il n’existe pas de fonction permettant de convertir une liste en chaîne de caractères. Donc, pour les exercices 4 et 5, il vaut mieux fournir la liste au programme dans une variable.
Sinon, une première solution consiste à demander les éléments 1 par 1, éventuellement les convertir en nombres (exercice 5) et construire la liste au fur et à mesure.
Exemple :
n = input("combien d'éléments dans la liste ? :") liste = [] for i in range(0, int(n)): a = input("donnez un nombre :") liste = liste + [int(a)] print(liste)
Une deuxième solution serait de :
- demander à l’utilisateur de fournir les éléments de la liste séparés par une virgule : par exemple 12,14,11,3
- d’utiliser split(« , ») pour en faire une liste
- de convertir tous les éléments en liste en nombre entiers
(ceci ne fonctionne pas avec des listes de chaînes si certaines chaînes contiennent plusieurs mots)
Exemple :
réponse = input("écrire les éléments de la liste de nombres entiers séparés par des espaces : ") # par exemple rep = "12,14,11,3" qui est une chaine de caractères liste = réponse.split(",") # liste = ["12", "14", "11", "3"] est une liste de chaînes de caractères liste1 = [] for x in liste: liste1 = liste1 + [int(x)] # chaque élément de la liste est converti en nombre entier : par exemple "12" est remplacé par 12 print(liste1) # liste1 = [12, 14, 11, 3]
Corrigé des exercices
Remarque : ne pas donner aux variables un nom qui correspond à un mot-clé python, par exemple int, def, str, ...
par exemple :
max = 3 print(max([23, 45, 12]))
affiche cette erreur :
Traceback (most recent call last):
File « /usr/lib/python3.10/idlelib/run.py », line 578, in runcode
exec(code, self.locals)
File « <pyshell#1> », line 1, in <module>
TypeError: ’int’ object is not callable
Dans la dernière ligne du message d’erreur ’int’ object is not callable signifie que dans la ligne du programme print(max([23 45, 12])) le nombre (int
) max n’est pas une fonction donc ne peut pas être appelé (callable
)
Exercice 1
multiples12 = [12 * i for i in range(1, 11)) # ou bien : # multiples12 = [12 * (i + 1) for i in range(0, 12)]
Exercice 2
k = input("combien voulez de multiples ? :") n = input("multiples de quel nombre ? :") print([i * n for i in range(1, n + 1)]) # ou bien : # print([(i + 1) * n for i in range(0, n)])
Exercice 3
from random import randint lst = [randint(1, 100) for i in range(0, 100)] print("le plus grand élément de " + lst + " est " + max(lst))
Exercice 4
lst = [3, 8, "a", 0] print([lst[3 - i] for i in range(0, 4)]) # plus généralement : # [lst[len(lst) - 1 - i] for i in range(0, len(lst))] # ou bien : def Inverse(lst): dest = [] indiceMax = len(lst) - 1 for i in range(0, len(lst)): dest = dest + [lst[indiceMax - i]] print(dest) Inverse([3, 8, "a", 0])
Exercice 5
def Tri(lst): dest = [] for i in range(0, len(lst)): minimum = lst[0] indexMinimum = 0 for j in range(0, len(lst)): if lst[j] < minimum: minimum = lst[j] indexMinimum = j dest = dest + [minimum] lst = lst[0:indexMinimum] + lst[indexMinimum + 1:len(lst)] print(dest) tri([10, 30, 20, 5, 20, 40, 3]))
Procédures et fonctions
Définition
Jusqu’ici à l’aide du mot-clé def nous avons défini des procédures : ce sont programmes qui exécutent des actions en utilisant des données que nous leur fournissons,
- soit par l’intermédiaire de paramètres,
- soit en utilisant des variables (locales) à l’intérieur de ces procédures.
def permet de définir aussi des fonctions : ce sont des programmes qui exécutent des actions mais qui, de plus, renvoient un résultat, à l’aide du mot-clé return
Exemples
(J’utilise personnellement une convention : si une procédure est une fonction, son nom commence par une minuscule.)
def impairs(lst): """ Renvoie la liste des nombres impairs appartenant à la liste lst """ return [x for x in lst if x % 2 == 1] def sommePlusGrands(a, lst): """ renvoie la somme des nombres plus grands que a dans la liste lst """ s = 0 for x in lst: if x > a: s = s + x return s def sommeImpairsPlusGrands(a, lst): """ renvoie la somme des éléments de la liste lst qui sont impairs et plus grands que a """ return sommePlusGrands(a, impairs(lst)) liste1 = [1, 100, 35, 30, 15] print(liste1) print(impairs(liste1)) print(sommePlusGrands(10, liste1)) print(sommeImpairsPlusGrands(10, liste1))
Récursion
def factorielle(n): if n == 0: return 1 else: return n * factorielle(n - 1) print(factorielle(5))
Exemple : probabilités noxexport
Projet : conjecture de Syracuse
Graphiques : matplotlib et turtle
turtle
On va utiliser le module turtle (tortue) qui est installé avec python.
Ce module implémente la « tortue Logo » inventée vers 1980 par Seymour Papert sous l’influence du courant cognitiviste en intelligence artificielle (Marvin Minsky) et du psychologue Jean Piaget. La tortue est alors un objet graphique piloté par un programme écrit en Logo, langage dérivé du langage Lisp. Depuis, des versions de cette tortue ont vu le jour dans de nombreux langages de programmation. En python, le module turtle permet d’utiliser cette fonctionnalité.
La documentation en français est ici : https://docs.python.org/fr/3.9/library/turtle.html
Après avoir importé ce module dans la session, on dispose de fonctions qui permettent de créer un objet turtle qui peut se déplacer en dessinant (ou non), exécutant les fonctions python fournies par le module.
Quelques exemples
# les 3 lignes qui suivent doivent être écrites au début de votre session python # DANS LES EXEMPLES QUI SUIVRONT JE NE RÉPÈTERAI PAS CES 3 LIGNES import importlib # bibliothèque utilitaireUne des méthodes pour dessiner en python est d'utiliser le module /turtle/. import turtle # on importe le module importlib.reload(turtle) # permet de reinitialiser le système graphique de la tortue t1 = turtle.Turtle() # on crée une tortue, c'est à dire un objet, instance de la classe Tortue t1.fd(100) # (forward) avancer de 100 pas dans la direction où est la tortue t1.rt(90) # (right) tourner à droite de 90° t1.bk(200) # (back) reculer de 200 pas t1.lt(60) # (left) tourner à gauche de 60° for n in range(0, 4): # dessiner 4 tirets t1.fd(50) # avancer de 150 pas t1.penup() # lever le crayon (au départ il est baissé) t1.fd(50) # avancer de 50 pas, sans dessiner, donc t1.pendown() # abaisser le crayon t2 = turtle.Turtle() # on crée une autre tortue t2.pencolor("red") # pour dessiner en rouge t2.penup() t2.rt(100) t2.fd(200) t2.setpos(-100, -50) # aller jusqu'au point de coordonnées (-100, -50) turtle.mainloop() # nécessaire pour que la fenêtre graphique reste affichée après l'exécution du programme
Dessiner un carré
On peut utiliser une tortue dans une fonction. On va dans cas inclure une paramètre désignant cette tortue
def Carré(tort, côté): # tort est le paramètre désignant la tortue, il faudra lui assigner un objet tortue créé avant l'exécution # côté est la longueur du côté du carré (en unités graphiques) for n in range(0, 4): # boucle pour les 4 côtés tort.fd(côté) # on dessine un coté tort.lt(90) # on tourne à gauche de 90° # pour exécuter : tortue1 = turtle.Turtle() # on crée une tortue Carré(tortue1, 100) # on appelle la fonction turtle.mainloop()
Dessiner des polygones réguliers
On généralise la procédure précédente à un polygone régulier à n côtés.
def Poly(tort, côté, nbCôtés): # remplissage for n in range(0, nbCôtés): tort.fd(côté) tort.lt(360 / nbCôtés) # pour exécuter t1 = turtle.Turtle() Poly(t1, 20, 12) # dodécagone de côté 20 turtle.mainloop()
Remarque : dans la fonction Poly, si vous insérez avant la boucle les deux lignes
tort.fillcolor("red") # couleur de remplissage tort.begin_fill() # début du coloriage de l'intérieur
et après la boucle la ligne
tort.end_fill() # fin du coloriage de l'intérieur
vous obtiendrez un polygone dont l’intérieur est colorié.
Dessiner une rosace
Comme d’habitude en python, une fonction (ici Poly) peut être appelée par une autre fonction (ici Rosace)
def Rosace(tort, côté, nbCôtés, nbPolys): for n in range(0, nbPolys): Poly(tort, côté, nbCôtés) tort.lt(360 / nbPolys) t = turtle.Turtle() Rosace(t, 15, 6, 20) # rosace obtenue en faisant tourner 20 fois un hexagone de côté 15 turtle.mainloop()
matplotlib et numpy 20240503
Pour utiliser matplotlib il faut l’installer
- sous Windows :
clic-droit sur l’icône Windows, Terminal (administration), valider en cliquant sur OUI, puis taper :
py -m ensurepip --default-pip
puis : py -m pip install -U matplotlib
puis : py -m pip install numpy
- sous Linux :
dans le terminal taper :
sudo apt install python3-pip
puis : python -m pip install -U matplotlib
puis : *python -m pip install numpy
introduction à matplotlib
exemple 1 : méthode de Monte-Carlo
exemple 2 : parties aliquotes d’un entier
matplotlib: compléments
Dictionnaires
Résumé :noexport:**** Les instructions d’entrée-sortie
affichage : print
print("bonjour") # imprime et passe à la ligne, print(1, 2, 3) # imprime les nombres en les séparant par un espace et passe à la ligne à la fin print("bonjour", end="") # imprime sans passer à la ligne print(1, 2, 3, sep=", ", end=" - ") # imprime les nombres en les séparant par une virgule et un espace ; met un tiret en fin de ligne, sans passer à la ligne
saisie : input
s = input("votre réponse : ") # ouvre une boîte de saisie avec le message votre réponse et met la réponse (sous forme de chaîne de caractères) dans la variable s
Les instructions de contrôle
Conditions
if
if condition1: instructions à exécuter si la condition 1 est vérifiée elif condition2: instructions à exécuter si la condition 2 est vérifiée ... else: sinon ...
match
match valeur: case valeur1: instructions1 case valeur2: instructions2 ... case _: instructions
Répétitions (boucles)
for
cette boucle est employée en général lorsqu’on connaît d’avance le nombre de répétitions
for i in range(0, 10): instructions à répéter 10 fois (pour i de 0 à 9)
while
cette boucle - plus générale - est employée lorsque la répétition dépend d’une condition
while condition:
instructions à répéter tant que la condition est vraie
Fonctions
def
permet de définir une fonction
def répétition(n): # va imprimer les entiers de 0 à n - 1 for i in range(0, n): print(i)
import
import module # importe toutes les fonctions du module ; une fonction nommée test dans le module sera utilisée sous la forme module.test from module import test # importe la fonction test à partir du module ; cette fonction sera utilisée sous la forme test from module import test as f # f devient un alias de test ; cette fonction sera utilisée sous le forme f